import { useRef, useState } from "react"
import { EditState, ImgEditor, ImgEditorRef } from "./components/imgEditor";
import { Shape2D } from "./components/imgEditor/objects/Shape2D";
import { Text2D } from "./components/imgEditor/objects/Text2D";
import { Img } from "./components/imgEditor/objects/Img2D";
import { TextPanel, defText } from "./components/TextAttr";


export const Demo1 = () => {

    const refEditor = useRef<ImgEditorRef>(null);
    const [editStatus, setEditStatus] = useState('select')
    const [selectedShape, setShape] = useState<Shape2D | null>()
    const [textAttrs, updateTextAttrs] = useState(defText)
    function onSelectChange(shape: Shape2D | null) {
        setShape(shape);
        if(shape instanceof Text2D ){ 
            const {color, fontFamily, fontSize}  = shape as Text2D;
            updateTextAttrs({color, fontFamily, fontSize })
        }
    }

    function onEditeStateChange(params: EditState) {
        setEditStatus(params);
    }

    function selectEditState(state: EditState) {
        if (refEditor.current) {
            refEditor.current.setEditState(state)
            setEditStatus(state)
        }
    }
    function updateTextAttr(color:string, fontFamily:string, fontSize:number) {
        const opt = {
            color ,
            font: `${fontSize}px ${fontFamily}`
        }
        console.log(opt);
        
        refEditor.current?.setShapeAttr(opt) ;
    }

    return <div className="draw-wrap">


        <ImgEditor ref={refEditor} imgChange={onSelectChange} />
        <div className="tools">
            <div className={"tool" + (editStatus === 'select' ? ' active' : '')} onClick={() => {

                selectEditState('select')
            }
            }>选择</div>
            <div className={"tool" + (editStatus === 'text' ? ' active' : '')} onClick={() => {

                selectEditState('text')
            }
            }>文字</div>
            <div className={"tool" + (editStatus === 'shape' ? ' active' : '')} onClick={() => {

                selectEditState('shape')
            }
            }>形状</div>

        </div>
        {selectedShape &&
            <TextPanel  color="#00ff00" fontFamily="楷体" fontSize={16} onChange={updateTextAttr}></TextPanel>
        }
    </div>
}